<template>
  <div class="content_box">
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-delete" @click="deleteData('/deleteStudents.do', deleteArr)" />
      <el-button circle icon="el-icon-plus" @click="addViews = true" />
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <VTable
      :list-data="listData[pageConfig.Page - 1]"
      :loading="loading"
      :table-config="tableConfig"
      @select-change="selectChange"
    >
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button icon="el-icon-edit" type="primary" @click="showUpData(scope.data.row)" />
          <el-button
            icon="el-icon-delete"
            type="primary"
            @click="deleteData('/deleteStudents.do', [{ key: scope.data.row.key }])"
          />
        </el-button-group>
      </template>
    </VTable>
    <el-dialog :visible.sync="addViews" destroy-on-close title="添加学生" top="10vh" width="30%" @close="addRe">
      <el-form
        :model="add_data"
        :rules="add_rules"
        class="dialog"
        label-position="rigth"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item label="学生名称" prop="username">
          <el-input v-model="add_data.username" clear clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="add_data.password" clear clearable />
        </el-form-item>
        <el-form-item label="学生身份证" prop="id_card">
          <el-input v-model="add_data.id_card" clear clearable />
        </el-form-item>
        <el-form-item label="学生手机号" prop="tel">
          <el-input v-model="add_data.tel" clear clearable type="tel" />
        </el-form-item>
        <el-form-item label="学生住址" prop="address">
          <el-input v-model="add_data.address" clear clearable />
        </el-form-item>
        <el-form-item label="班级" prop="class_name">
          <el-select v-model="add_data.class_name" placeholder="请选择">
            <el-option
              v-for="(item, index) in classOptions"
              :key="index"
              :disabled="item.status"
              :label="item.class_name"
              :value="item.class_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="add_data.sex" placeholder="请选择">
            <el-option v-for="(item, index) in sexOption" :key="index" :label="item" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="add_data.status" />
        </el-form-item>
      </el-form>
      <el-button
        :disabled="!add_data.username || !add_data.password || !add_data.telVerify || !add_data.id_caraVerify || !add_data.address || !add_data.class_name || add_data.sex==null"
        type="primary"
        @click="addData"
      >添加
      </el-button>
      <el-button @click="addRe">清除</el-button>
    </el-dialog>
    <el-dialog :visible.sync="editViews" destroy-on-close title="修改学生信息" top="10vh" width="30%" @close="addRe">
      <el-form
        :model="editData"
        :rules="add_rules"
        class="dialog"
        label-position="rigth"
        label-width="100px"
        @submit.native.prevent
      >
        <el-form-item label="学生名称" prop="username">
          <el-input v-model="editData.username" clear clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editData.password" clear clearable />
        </el-form-item>
        <el-form-item label="学生身份证" prop="id_card">
          <el-input v-model="editData.id_card" clear clearable />
        </el-form-item>
        <el-form-item label="学生手机号" prop="tel">
          <el-input v-model="editData.tel" clear clearable type="tel" />
        </el-form-item>
        <el-form-item label="学生住址" prop="address">
          <el-input v-model="editData.address" clear clearable />
        </el-form-item>
        <el-form-item label="班级" prop="class_name">
          <el-select v-model="editData.class_name" placeholder="请选择">
            <el-option
              v-for="(item, index) in classOptions"
              :key="index"
              :disabled="item.status"
              :label="item.class_name"
              :value="item.class_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="editData.sex" placeholder="请选择">
            <el-option v-for="(item, index) in sexOption" :key="index" :label="item" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="editData.status" />
        </el-form-item>
      </el-form>
      <el-button
        :disabled="!editData.username || !editData.password || !editData.tel || !editData.id_card || !editData.address || !editData.class_name || editData.sex==null || !add_data.telVerify || !add_data.id_caraVerify"
        type="primary"
        @click="upData(editData)"
      >修改
      </el-button>
      <el-button @click="addRe">清除</el-button>
    </el-dialog>
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :size-change="pageConfig.size"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
import { addStudentsApi, getClassesApi, getStudentsApi, majorsListApi, updateStudentApi } from '@/api/table'
import { deleteData, pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'

export default {
  name: 'StudentInfo',
  data() {
    const telVerify = (rule, value, callback) => {
      const exec = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
      if (exec.exec(value)) {
        this.add_data.telVerify = true
        callback()
      } else {
        this.add_data.telVerify = false
        callback(new Error())
      }
    }
    const id_cardVerify = (rule, value, callback) => {
      const exec = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (exec.exec(value)) {
        this.add_data.id_caraVerify = true
        callback()
      } else {
        this.add_data.id_caraVerify = false
        callback(new Error())
      }
    }
    return {
      listData: [],
      interimListData: [],
      majorOptions: [],
      classOptions: [],
      sexOption: ['女', '男'],
      loading: true,
      tableConfig: {
        table_show: {
          add_time: '创建时间',
          username: '学生名称',
          id_card: '学生身份证',
          sex: '性别',
          tel: '手机号',
          class_name: '班级',
          major_name: '专业',
          password: '密码'
        },
        sortable: { key: true, username: true, sex: true, class_name: true, major_name: true },
        status: true,
        selection: true,
        align: 'center',
        operate: true
      },
      option: {
        option_name: ['学生名称', '学生身份证', '手机号', '班级', '专业'],
        object_name: ['username', 'id_card', 'tel', 'class_name', 'major_name']
      },
      editData: {},
      editViews: false,
      addViews: false,
      add_data: {
        username: '', password: '', id_card: '', sex: null, tel: '', address: '', class_name: '',
        status: false, classOptions: [], majorOptions: [], telVerify: false, id_caraVerify: false
      },
      add_rules: {
        username: [
          { required: true, message: '请输入学生名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入学生密码', trigger: 'blur' }
        ],
        id_card: [
          { required: true, message: '请输入学生身份证', trigger: 'blur' },
          { validator: id_cardVerify, message: '请输入正确的身份证', trigger: ['blur', 'change'] }
        ],
        tel: [
          { required: true, message: '请输入学生手机号', trigger: 'blur' },
          { validator: telVerify, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ],
        address: [
          { required: true, message: '请输入学生住址', trigger: 'blur' }
        ],
        class_name: [
          { required: true, message: '请选择学生班级', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择学生性别', trigger: 'blur' }
        ]
      },
      deleteArr: [],
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pagesSize: 10
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    // 换页
    pageSizeChange: pageSizeChange,
    // 删除表数据
    deleteData: deleteData,
    showUpData(data) {
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    getListData() {
      this.loading = true
      getStudentsApi().then(response => {
        for (const key in response.data.data) {
          if (!response.data.data[key].sex) {
            response.data.data[key].sex = '女'
          } else {
            response.data.data[key].sex = '男'
          }
        }
        const { newListData, data } = tableDataProcess(response.data.data, this.pageConfig.pagesSize)
        setTimeout(() => (this.loading = false), 500)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
      getClassesApi().then(res => {
        this.classOptions = []
        for (const key in res.data.data) {
          res.data.data[key].status = res.data.data[key].status !== 1
          this.classOptions.push({
            class_name: res.data.data[key].class_name,
            status: res.data.data[key].status
          })
        }
      })
      majorsListApi().then(res => {
        this.majorOptions = []
        for (const key in res.data.data) {
          res.data.data[key].status = res.data.data[key].status !== 1
          this.majorOptions.push({
            major_name: res.data.data[key].major_name,
            status: res.data.data[key].status
          })
        }
      })
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    addData() {
      if (this.add_data.status) {
        this.add_data.status = 1
      } else {
        this.add_data.status = 0
      }
      addStudentsApi(this.add_data).then(response => {
        this.getListData()
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
    },
    upData() {
      if (this.editData.status) {
        this.editData.status = 1
      } else {
        this.editData.status = 0
      }
      updateStudentApi(this.editData).then((response) => {
        this.getListData()
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
    },
    addRe() {
      this.add_data = {}
      Object.keys(this.editData).forEach(item => {
        if (item !== 'key') this.editData[item] = null
      })
    },
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style scoped>
</style>
